<template>
  <div id="myInfo">
    <el-tabs type="border-card">
      <el-tab-pane label="个人资料">
        <div class="personal_info">
          <p><span>姓名: </span>劳惠敏</p>
          <p><span>性别：</span>女</p>
          <p><span>年龄：</span>22</p>
          <p><span>身高：</span>159cm</p>
          <p><span>学历：</span>大学</p>
          <p><span>月薪：</span>10000</p>
          <p><span>工作地点：</span>UC</p>
          <p><span>婚姻状态：</span>未婚</p>
          <p><span>籍贯：</span>广东</p>
        </div>
        <div class="personal_info">
          <p><span>体重：</span>100kg</p>
          <p><span>血型：</span>O型</p>
          <p><span>民族：</span>22</p>
          <p><span>属相：</span>鼠</p>
          <p><span>宗教信仰：</span>无</p>
          <p><span>星座：</span>处女座</p>
          <p><span>脸型：</span>圆形</p>
          <p><span>居住状况：</span>无楼</p>
          <p><span>购车状况：</span>无车</p>
        </div>
        <div class="mod-info">
          <el-button type="primary" @click="modInfo1 = true">修改资料</el-button>
          <el-dialog title="修改资料" :visible.sync="modInfo1">
            <el-form :model="form">
              <el-form-item label="姓名：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="年龄：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="身高：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="学历：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="月薪：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="工作地点：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="婚姻状况：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="籍贯：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="modInfo1 = false">取 消</el-button>
              <el-button type="primary" @click="modInfo1 = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      <br>

<!--     <el-table
          :data="detialTableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="个人详细资料"
            width="130">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="详细"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="个人详细资料"
            width="150">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="详细">
          </el-table-column>
    </el-table>
    <div class="mod-info">
      <el-button type="primary" @click="modInfo2 = true">修改资料</el-button>
      <el-dialog title="修改资料" :visible.sync="modInfo2">
        <el-form :model="form2">
          <el-form-item label="体重：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="血型：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="民族：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="属相：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="宗教信仰：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="星座：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="发型：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="脸型：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="居住状况：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="购车状况：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="modInfo1 = false">取 消</el-button>
          <el-button type="primary" @click="modInfo1 = false">确 定</el-button>
        </div>
      </el-dialog>
    </div> -->

  </el-tab-pane>
  <el-tab-pane label="家庭背景">
    <el-table
        :data="familyTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="家庭资料"
          width="150">
        </el-table-column>
        <el-table-column
          prop="detial"
          label="详细"
          width="300">
        </el-table-column>
        <el-table-column
          prop="other"
          label="备注">
        </el-table-column>
    </el-table>
    <div class="mod-info">
      <el-button type="primary">修改资料</el-button>
    </div>
  </el-tab-pane>
  <el-tab-pane label="婚姻期待">
    <el-table
        :data="MarryTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="婚姻期待"
          width="150">
        </el-table-column>
        <el-table-column
          prop="detial"
          label="详细"
          width="300">
        </el-table-column>
        <el-table-column
          prop="other"
          label="备注">
        </el-table-column>
    </el-table>
    <div class="mod-info">
      <el-button type="primary">修改资料</el-button>
    </div>
  </el-tab-pane>
  <el-tab-pane label="生活习惯">
    <el-table
        :data="habitTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="生活习惯"
          width="150">
        </el-table-column>
        <el-table-column
          prop="detial"
          label="详细"
          width="300">
        </el-table-column>
        <el-table-column
          prop="other"
          label="备注">
        </el-table-column>
    </el-table>
    <div class="mod-info">
      <el-button type="primary">修改资料</el-button>
    </div>
  </el-tab-pane>
  <el-tab-pane label="情感状况">
    <el-table
        :data="loveTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="感情生活"
          width="150">
        </el-table-column>
        <el-table-column
          prop="detial"
          label="详细"
          width="300">
        </el-table-column>
        <el-table-column
          prop="other"
          label="备注">
        </el-table-column>
   </el-table>
   <div class="mod-info">
      <el-button type="primary">修改资料</el-button>
    </div>
  </el-tab-pane>
  <el-tab-pane label="品味生活">
    <el-table
        :data="lifeTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title"
          label="生活爱好"
          width="150">
        </el-table-column>
        <el-table-column
          prop="detial"
          label="详细"
          width="300">
        </el-table-column>
        <el-table-column
          prop="other"
          label="备注">
        </el-table-column>
    </el-table>
    <div class="mod-info">
      <el-button type="primary">修改资料</el-button>
    </div>
  </el-tab-pane>
</el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'myInfo',
    data(){
      return{
        modInfo1: false,
        modInfo2: false,
        form: {
          name: '',
        },
        form: {
          name2: '',
        },
        formLabelWidth: '120px',

        form:{
          list:[
          {
            title:'基本资料',
          },
          {
            title:'详细资料',
          },
         ],
        },
        contant:{
          listLeft:[
          {
            contTitle:'姓名',
            input: '',
            contTitle2:'月薪',
          },
          {
            contTitle:'性别',
            input: '',
            contTitle2:'工作地点',
          },
          {
            contTitle:'年龄',
            input: '',
            contTitle2:'婚姻状况',
          },
          {
            contTitle:'身高',
            input: '',
            contTitle2:'籍贯',
          },
          {
            contTitle:'学历',
            input: '',
            contTitle2:'备注',
          },
          ],
        },
        personTableData:[
        {
          title1:'姓名',
          detial1:'劳惠敏',
          title2:'月薪',
          detial2:'10000元',
        },
        {
          title1:'性别',
          detial1:'女',
          title2:'工作地点',
          detial2:'UC',
        },
        {
          title1:'年龄',
          detial1:'22',
          title2:'婚姻状况',
          detial2:'未婚',
        },
        {
          title1:'身高',
          detial1:'159cm',
          title2:'籍贯',
          detial2:'广东',
        },
        {
          title1:'学历',
          detial1:'大学',
          title2:'',
          detial2:'',
        },
        ],
        detialTableData:[
        {
          title1:'体重',
          detial1:'100kg',
          title2:'星座',
          detial2:'处女座',
        },
        {
          title1:'血型',
          detial1:'O型',
          title2:'发型',
          detial2:'扎辫',
        },
        {
          title1:'民族',
          detial1:'汉',
          title2:'脸型',
          detial2:'圆形',
        },
        {
          title1:'属相',
          detial1:'鼠',
          title2:'居住状况',
          detial2:'无楼',
        },
        {
          title1:'宗教信仰',
          detial1:'无',
          title2:'购车状况',
          detial2:'无车',
        },
        ],
        familyTableData:[
        {
          title: '住址',
          detial: '中国／广东／广州／天河区／五山路',
        }, 
        {
          title: '父母情况',
          detial: '父母健全',
        }, 
        {
          title: '家中排行',
          detial: '独子',
        }, 
        {
          title: '有无子女',
          detial: '无',
        },
        {
          title: '子女监护人',
          detial: '无',
        },
        ],
        MarryTableData:[
        {
          title:'结婚时间',
          detial:'26岁',
        },
        {
          title:'婚礼方式',
          detial:'礼堂／游婚',
        },
        {
          title:'是否愿意与父母同住',
          detial:'愿意',
        },
        {
          title:'是否要小孩',
          detial:'是',
        },
        {
          title:'对结婚的看法',
          detial:'可有可无',
        },
        ],
        habitTableData:[
        {
          title:'是否吸烟',
          detial:'否',
        },
        {
          title:'是否喝酒',
          detial:'是',
        },
        {
          title:'生活作息',
          detial:'十分规律',
        },
        {
          title:'家务能力',
          detial:'能做一点',
        },
        {
          title:'做菜能力',
          detial:'不会',
        },
        {
          title:'是否养宠物',
          detial:'是',
        },
        {
          title:'存款习惯',
          detial:'月光族',
        },
        ],
        loveTableData:[
        {
          title:'单身时间',
          detial:'出生到高中／现在',
        },
        {
          title:'恋爱次数',
          detial:'1次',
        },
        {
          title:'维系感情最重要的因素',
          detial:'忍让',
        },
        {
          title:'为什么想找恋人',
          detial:'因为现在没有啊....',
        },
        {
          title:'上次情感结束的原因',
          detial:'不想提',
        },
        ],
        lifeTableData:[
        {
          title:'做过哪些公益',
          detial:'艺教',
        },
        {
          title:'喜欢的旅游方式',
          detial:'一群人',
        },
        {
          title:'喜欢的体育运动',
          detial:'羽毛球',
        },
        {
          title:'喜欢的书籍类型',
          detial:'各种各样',
        },
        {
          title:'喜欢的书',
          detial:'《19天》',
        },
        {
          title:'喜欢的电影',
          detial:'钢铁侠',
        },
        {
          title:'喜欢的音乐',
          detial:'hip-hop',
        },
        {
          title:'喜欢的修行方式',
          detial:'旅游',
        },
        {
          title:'关注的媒体内容',
          detial:'无',
        },
        ],
      }
    },
  }
  
</script>

<style scoped>
  #myInfo {
    width: 800px;
    height: 400px;
  }
  .personal_info {
    display: inline-block;
    width: 40%;
    padding: 5px;
  }
  .contant-input{
    width: 100px;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 1;
    outline: none;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .info-contant{
    padding-bottom: 15px;
    width: 800px;
  }
  ul{
    list-style-type: none;
  }
  div.info-title{
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  div.mod-info{
    padding: 20px;
    text-align: center;
  }
  

</style>